<template>
    <div class="upload-box">
		<!-- <text>限制{{maxNum}}张</text> -->
        <!-- <view class="image-box"> -->
			<uni-grid :column="3" :showBorder="false"  :square="false">
				<uni-grid-item v-if="listImage.length < maxNum">
					<view class="flex-c add-image" @click="addImg()" >
					    <image @click="addImg()" class="image" src="@/static/image/camera.png" ></image>
					</view>
				</uni-grid-item>
				<uni-grid-item  v-for="(item,idx) in listImage" :key="idx">
					<view class="image-item">
						<image :src="item" mode="aspectFill" @click="preImage(idx)"></image>
						<uni-icons size="20" class="close" type="close" @click="cancleImage(idx)"></uni-icons>
					</view>
				</uni-grid-item>
				<!-- <view v-if="listImage.length > 0"> -->
					
				<!-- </view> -->
			</uni-grid>
            
			
        <!-- </view> -->
    </div>
    
</template>

<script>
export default {
    data() {
        return {
            listImage:[],
            imagePath:[],
        }
    },
    props:{
        maxNum:{
            default:1,
            typeof:Number
        },
		watermark:{
			default:false,
			typeof:Boolean
		}
    },
	model:{
		prop: 'files',
		event: 'change'
	},
	mounted() {
		let self = this
		uni.$on('watermarkImage',(res)=>{
			self.listImage = self.listImage.concat(res);
			this.$emit('change',self.listImage.toString())
			this.$emit('uploadSuccess',this.listImage.toString())
		})
	},
	destroyed() {
		uni.$off('watermarkImage')
	},
    methods: {
        cancleImage(idx){
			this.listImage.splice(idx,1)
			// this.imagePath.splice(idx,1)
			this.$emit('change',this.listImage.toString())
			this.$emit('cancleImage',this.listImage.toString())
		},
        preImage(idx){
			uni.previewImage({
				current:idx,
				urls:this.listImage
			})
		},
        addImg(){
			let self = this
			let key = this.maxNum - this.listImage.length
			if(key > 0){
				if (this.watermark) {
					this.gotoWatermark()
					return
				}
			uni.chooseImage({
				count: key,
				sizeType:['compressed'],
				success: (res) => {
					console.log(res)
					self.listImage = self.listImage.concat(res.tempFilePaths);
					this.$emit('change',self.listImage.toString())
					this.$emit('uploadSuccess',this.listImage.toString())
					// for (let index = 0; index < res.tempFilePaths.length; index++) {
					// 	const element = res.tempFilePaths[index];
					// 	uni.uploadFile({
					// 	filePath:element,
					// 	name:'file',
					// 	url: `${uni.$domain.default}/annex/uniqueUploadList`,
					// 	header:{
					// 		access_token :  uni.getStorageSync('ACCESS_Token')
					// 	},
					// 	success: (res) => {
					// 		// const { statusCode, data } = res;
					// 		console.log(res)
					// 		if (res.statusCode == 200){
					// 			let data = JSON.parse(res.data)
					// 			let message = data.data;
					// 			this.imagePath.push(message[0].id)
					// 			this.$emit('change',this.imagePath.toString())
					// 			this.$emit('uploadSuccess',this.imagePath)
					// 		}
					// 	},
					// 	fail:(res) => {
					// 		console.log('===22======',res)
					// 	}
					// })
					// }
					
				}
			})
			}else{
				uni.showToast({
					icon:'none',
					mask:true,
					title:`最多选择${this.maxNum}张照片`
				})
			}
		},
		gotoWatermark(){
			this.$store.commit('system/toAppPage',{
				type:'camera'
			});
		}
    },
}
</script>

<style lang='scss' scoped>
	.upload-box{
		flex: 1;
		padding: 10rpx;
	}
    /* .image-box {
        display: grid;
        grid-template-columns: 30% 30% 30% ; */
        .close{
            position: relative;
            top: -80px;
            right: -50px;
			padding: 10rpx;
        }
        .image-item{
            margin: 0 10rpx;
        }
        image {
            width: 140rpx;
            height: 140rpx;
			overflow: hidden;
        }
    /* } */
    .add-image {
        width: 139rpx;
        height: 139rpx;
        border-radius: 4px;
        background: #f7f7f7;
        /* border: 1px solid #d6d6d6; */
        align-items: center;
        justify-content: center;
		display: flex;
        .image{
            width: 40rpx;
            height: 33rpx;
        }
        
        .text{
            font-family: "PingFang SC";
            font-weight: 400;
            font-size: 14px;
            color: #666;
            margin-top: 15px;
        }
    }
</style>